<template>
  <div class="songbox">
    <div class="songdetails">
      <img :src="img" />
      <div class="songContent">
        <img
          :class="`contol ${play ? 'wudi' : ''}`"
          src="../assets/stick.png"
          alt=""
        />
        <div class="song">
          <img class="songimgbg" src="../assets/disk.png" alt="" />
          <img :class="`songimg ${play ? 'play' : null}`" :src="img" />
          <div class="songcontol">
            <div><img src="../assets/love.png" alt="" /> 喜欢</div>
            <div><img src="../assets/collect.png" alt="" /> 收藏</div>
            <div><img src="../assets/download.png" alt="" />VIP下载</div>
            <div><img src="../assets/share.png" alt="" />分享</div>
          </div>
        </div>
        <div class="songinfo">
          <p class="songName">{{ songName }}</p>
          <div class="res">
            <span>专辑：{{ zj }}</span>
            <span>歌手：{{ name }}</span>
            <span>来源：发现页</span>
          </div>
          <div class="zoom" @click="zoom">
            <img src="../assets/zoom.png" alt="" />
          </div>
          <lyric />
        </div>
      </div>
    </div>
    <div class="pl">
      <comment :songid="Nowplay" />
    </div>
  </div>
</template>
<script>
//import hotCommont from './playlist/hotcomment'
import { mapState } from "vuex";
import comment from "./playlist/comment";
import lyric from "./lyric";
export default {
  components: {
    comment,
    lyric,
  },
  data() {
    return {
      songName: "", //歌曲名字
      name: "", //歌手name
      img: "", //图片
      zj: "", //专辑
      load: "",
    };
  },
  methods: {
    zoom() {
      this.$store.commit("showsong");
    },
    getsong(val) {
      this.$api.song({ ids: val }).then((res) => {
        this.songName = res[0].name;
        this.name = res[0].ar[0].name;
        this.img = res[0].al.picUrl;
        this.zj = res[0].al.name;
        this.load.hide();
      });
    },
  },
  mounted() {
    this.load = this.$loading.show();
    this.getsong(this.Nowplay);
  },
  computed: {
    ...mapState(["Nowplay", "play"]),
  },
  watch: {
    Nowplay(val) {
      val && this.getsong(val);
    },
  },
};
</script>
<style lang="less" scoped>
.songbox {
  position: relative;
  height: inherit;
  .songdetails {
    background-color: #fafafa;
    z-index: 1;
    height: inherit;
    position: relative;
    > img {
      height: inherit;
      position: absolute;
      width: 100%;
      right: 0;
      margin: 0 auto;
      opacity: 0.2;
      filter: blur(20px);
      z-index: -1;
    }
    .songContent {
      position: absolute;
      display: flex;
      width: 100%;
      height: inherit;
      justify-content: space-between;
      .contol {
        position: absolute;
        width: 120px;
        height: 160px;
        left: 225px;
        top: -13px;
        transform-origin: top left;
        z-index: 99;
        transform: rotate(-20deg);
        animation: aa 2s linear 1;
        animation-play-state: paused;
      }
      .wudi {
        animation: aa 2s linear infinite;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
      }
      @keyframes aa {
        from {
          transform: rotate(-20deg);
        }
        to {
          transform: rotate(-10deg);
        }
      }
      .song {
        margin: 60px 80px;
        position: relative;
        .songimgbg {
          width: 310px;
          border: 5px solid #c3c8cd;
          border-radius: 50%;
        }
        .songimg {
          position: absolute;
          left: 48px;
          top: 50px;
          width: 215px;
          border-radius: 50%;
          animation: rotate 15s linear infinite;
          animation-play-state: paused;
        }
        .play {
          animation: rotate 15s linear infinite;
          animation-fill-mode: forwards;
        }
        @keyframes rotate {
          0% {
            transform: rotate(0);
          }

          100% {
            transform: rotate(360deg);
          }
        }
        .songcontol {
          display: flex;

          margin-top: 40px;
          > div {
            margin-left: 10px;
            border-radius: 3px;
            border: 1px solid #bcbdbe;
            padding: 2px 10px;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              margin-right: 5px;
              width: 15px;
            }
          }
        }
      }
      .songinfo {
        flex: 1;
        margin-top: 30px;
        position: relative;

        .songName {
          font-size: 24px;
        }
        .res {
          margin-top: 10px;
          font-size: 13px;
          span {
            margin-right: 70px;
          }
        }
        .zoom {
          position: absolute;
          right: 40px;
          top: 5px;
          width: 35px;
          height: 25px;
          border-radius: 3px;
          background-color: #fff;
          border: 1px solid #dfdfe0;
          cursor: pointer;
          img {
            width: 30px;
            transform: rotate(-45deg);
            margin: -3px 1px;
          }
        }
      }
    }
  }
  .pl {
    position: absolute;
    z-index: 9999999;
    background-color: #fafafa;
    width: 59%;
    margin: -60px 60px;
  }
}
</style>
